<template>
  <div class="comment-item" :class="{ 'is-reply': isReply }">
    <!-- 用户信息 -->
    <div class="user-info">
      <van-image
          round
          width="32"
          height="32"
          :src="comment.userAvatar"
          class="avatar"
      />
      <div class="meta">
        <span class="username">{{ comment.userName }}</span>
        <span class="time">{{ formatTime(comment.createTime) }}</span>
        <span v-if="comment.floor" class="floor">#{{ comment.floor }}楼</span>
      </div>
    </div>

    <!-- 评论内容 -->
    <div class="content" v-html="highlightMentions(comment.content)"></div>

    <!-- 操作栏 -->
    <div class="actions">
      <div class="like-action" @click.stop="handleLike">
        <van-icon
            :name="comment.isLiked ? 'good-job' : 'good-job-o'"
            :color="comment.isLiked ? '#ee0a24' : '#666'"
        />
        <span>{{ comment.likeCount }}</span>
      </div>
      <van-button
          size="mini"
          plain
          @click.stop="$emit('reply', comment)"
      >
        回复
      </van-button>
    </div>

    <!-- 子评论 -->
    <div v-if="hasReplies" class="replies-container">
      <!-- 切换按钮 -->
      <div v-if="!showReplies" class="replies-toggle">
        <van-button
            size="mini"
            plain
            @click.stop="toggleReplies"
        >
          ...查看回复 ({{ comment.replies.length }})
        </van-button>
      </div>

      <!-- 子评论列表 -->
      <div v-if="showReplies" class="replies">
        <comment-item
            v-for="reply in comment.replies"
            :key="reply.id"
            :comment="reply"
            is-reply
            @like="$emit('like', reply)"
            @reply="$emit('reply', reply)"
        />
        <!-- 收起按钮 -->
        <div class="collapse-toggle">
          <van-button
              size="mini"
              plain
              @click.stop="toggleReplies"
          >
            收起
          </van-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { computed, ref } from 'vue'
import dayjs from 'dayjs'

const props = defineProps({
  comment: {
    type: Object,
    required: true
  },
  isReply: {
    type: Boolean,
    default: false
  }
})

const emit = defineEmits(['like', 'reply'])

// 控制子评论的显示/隐藏状态
const showReplies = ref(false)

// 是否有子评论
const hasReplies = computed(() => props.comment.replies?.length > 0)

// 格式化时间显示
const formatTime = (time) => {
  return dayjs(time).format('MM-DD HH:mm')
}

// 高亮@提及
const highlightMentions = (text) => {
  if (!text) return ''; // 如果 text 为 null 或者空字符串，返回空字符串

  // 使用正则表达式匹配 @用户名（用户名以空格或字符串结尾结束）
  const mentionRegex = /@(\w+)\s?/g;

  // 替换匹配到的内容为带有 <span class="mention"> 的 HTML 片段
  let processedText = text.replace(mentionRegex, (match, username) => {
    return `<span class="mention">@${username}</span> `;
  });

  // 将换行符 \n 替换为 <br>
  processedText = processedText.replace(/\n/g, '<br>');

  return processedText;
}

// 处理点赞
const handleLike = () => {
  emit('like', {
    ...props.comment,
    isLiked: !props.comment.isLiked,
    likeCount: props.comment.isLiked ? props.comment.likeCount - 1 : props.comment.likeCount + 1
  })
}

// 切换子评论的显示/隐藏
const toggleReplies = () => {
  showReplies.value = !showReplies.value
}
</script>

<style scoped>
.comment-item {
  padding: 12px;
  margin: 8px 0;
  background: #fff;
  border-radius: 8px;

  &.is-reply {
    margin-left: 32px;
    background: #f8f8f8;
    border-radius: 6px;
  }

  .user-info {
    display: flex;
    align-items: center;
    margin-bottom: 8px;

    .avatar {
      margin-right: 12px;
    }

    .meta {
      position: relative;
      flex: 1;
      font-size: 13px;

      .username {
        font-weight: 500;
        margin-right: 8px;
      }

      .time {
        color: #999;
        margin-right: 8px;
      }

      .floor {
        color: #666;
        position: absolute;
        right: 0px;
      }
    }
  }

  .content {
    margin-left: 44px;
    font-size: 15px;
    line-height: 1.5;

    :deep(.mention) {
      color: #576b95;
      font-weight: 500;
    }
  }

  .actions {
    margin-left: 44px;
    margin-top: 8px;
    display: flex;
    align-items: center;
    gap: 16px;

    .like-action {
      display: flex;
      align-items: center;
      gap: 4px;
      color: #666;
      font-size: 12px;
    }
  }

  .replies-container {
    margin-left: 44px;
  }

  .replies-toggle {
    margin-top: 8px;
  }

  .replies {
    margin-top: 12px;
    border-left: 2px solid #eee;
    padding-left: 12px;
  }

  .collapse-toggle {
    margin-top: 8px;
    text-align: right;
  }
}
</style>
